Ajax ইন্সটলেশনের জন্য কোনো নির্দিষ্ট সফটওয়্যার প্রয়োজন হয় না, কারণ এটি একটি ওয়েব প্রযুক্তি যা HTML, CSS, এবং JavaScript এর সমন্বয়ে কাজ করে। তবে Ajax সেটআপ এবং ব্যবহারের জন্য কিছু নির্দিষ্ট স্টেপ অনুসরণ করতে হয়। নিচে একটি Ajax ভিত্তিক প্রোজেক্ট সেটআপ করার জন্য প্রয়োজনীয় ধাপগুলো আলোচনা করা হলো।
Ajax ব্যবহারের আগে নিচের বিষয়গুলো নিশ্চিত করতে হবে:
Ajax কাজ করার জন্য প্রথমে একটি HTML ফাইল তৈরি করুন এবং সেটি ব্রাউজারে ওপেন করুন। এটি Ajax কার্যক্রমের বেস হিসেবে কাজ করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Example</title>
</head>
<body>
<button onclick="loadData()">Load Data</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
Ajax এর জন্য একটি আলাদা JavaScript ফাইল তৈরি করুন এবং HTML ফাইলে সেটি লিঙ্ক করুন।
script.js:
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.send();
}
Ajax কাজ করার জন্য সার্ভার থেকে ডেটা আনতে হবে। একটি টেক্সট বা JSON ফাইল ব্যবহার করে ডেটা তৈরি করুন।
data.txt:
Hello, this is data loaded using Ajax!
Ajax একটি HTTP প্রোটোকলের মাধ্যমে কাজ করে, তাই একটি লোকাল বা রিমোট সার্ভার প্রয়োজন। যদি লোকাল সার্ভার ব্যবহার করতে চান:
htdocs (XAMPP) বা www (WAMP) ফোল্ডারে রাখুন।http://localhost/ajax-example/index.html)।ব্রাউজারে HTML ফাইলটি খুলুন এবং বাটন ক্লিক করুন। যদি সবকিছু সঠিকভাবে সেটআপ করা থাকে, তবে data.txt ফাইলের ডেটা লোড হবে এবং প্রদর্শিত হবে।
Ajax ভিত্তিক লাইব্রেরি যেমন jQuery, সহজ সেটআপের জন্য সাহায্য করে। আপনি jQuery ব্যবহার করতে চাইলে সিডিএন লিঙ্ক যোগ করুন:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
একটি jQuery ভিত্তিক Ajax কল উদাহরণ:
$(document).ready(function () {
$("#button").click(function () {
$.ajax({
url: "data.txt",
method: "GET",
success: function (data) {
$("#result").html(data);
},
error: function () {
alert("Error loading data");
},
});
});
});
onerror বা catch ব্লক ব্যবহার করে সম্ভাব্য ত্রুটি হ্যান্ডেল করুন।Ajax সেটআপ প্রক্রিয়া খুবই সহজ এবং দ্রুত। একটি প্রাথমিক প্রজেক্ট তৈরি করলেই Ajax এর কার্যকারিতা বোঝা সম্ভব। এটি ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারবান্ধব করে তোলে।
Ajax প্রোগ্রাম তৈরি করার জন্য আপনাকে HTML, JavaScript এবং একটি সার্ভার রিসোর্স (যেমন একটি API বা একটি JSON ফাইল) প্রয়োজন হবে, যেখান থেকে আপনি ডেটা আনবেন। এখানে একটি সহজ Ajax প্রোগ্রামের উদাহরণ দেওয়া হলো, যা সার্ভার থেকে JSON ডেটা নিয়ে তা HTML এ দেখাবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Example</title>
</head>
<body>
<h1>Ajax Data Load Example</h1>
<button onclick="loadData()">Load Data</button>
<div id="data-container"></div>
<script src="app.js"></script>
</body>
</html>
ব্যাখ্যা:
button রয়েছে যা ক্লিক করার সময় loadData() ফাংশন কল করবে।<div> এলিমেন্ট রয়েছে যার আইডি data-container।app.js ফাইলের মাধ্যমে যুক্ত করা হয়েছে।function loadData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক true)
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স রেডি হলে কি করবে তা নির্ধারণ করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// JSON ডেটা রিসিভ করা এবং প্রসেস করা
var data = JSON.parse(xhr.responseText);
// HTML এ ডেটা দেখানো
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
ব্যাখ্যা:
loadData() ফাংশন একটি Ajax রিকোয়েস্ট তৈরি করে এবং সার্ভারের URL https://jsonplaceholder.typicode.com/posts/1 থেকে JSON ডেটা রিসিভ করে।xhr.open("GET", "URL", true); দিয়ে আমরা রিকোয়েস্ট ওপেন করেছি। "GET" মানে ডেটা আনতে চাই, "true" মানে এটি অ্যাসিনক্রোনাস হবে।xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে আমরা চেক করেছি যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (readyState === 4) এবং সফল হয়েছে কিনা (status === 200)।data-container ডিভে সেই ডেটা দেখানো হয়েছে।এখানে আমরা ডেমো API https://jsonplaceholder.typicode.com/posts/1 ব্যবহার করেছি, যা JSON ডেটা রিটার্ন করে। এই API ডেটা রিকোয়েস্ট করলে নিচের মতো ডেটা রিটার্ন করবে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
এই প্রোগ্রামে, আমরা একটি বেসিক Ajax রিকোয়েস্ট করেছি যা একটি API থেকে ডেটা এনে তা HTML পেজে দেখিয়েছি। এটি Ajax এর মাধ্যমে ডায়নামিক ডেটা লোড এবং UI আপডেট করার একটি সহজ উদাহরণ।
HTML এবং JavaScript এর সাথে Ajax সংযোগ করার জন্য আমরা JavaScript ব্যবহার করে XMLHttpRequest অবজেক্টের মাধ্যমে একটি রিকোয়েস্ট পাঠাই এবং HTML ডকুমেন্টে সেই ডেটা ডায়নামিকভাবে আপডেট করি। Ajax এর মাধ্যমে এই সংযোগের প্রক্রিয়াটি খুবই গুরুত্বপূর্ণ, কারণ এটি ওয়েব পেজকে ডায়নামিক এবং ইন্টারেক্টিভ করে তোলে। নিচে HTML এবং JavaScript এর সাথে Ajax সংযোগের একটি পূর্ণাঙ্গ উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Example</title>
</head>
<body>
<h1>Ajax Data Load Example</h1>
<button onclick="fetchData()">Load Data</button>
<div id="result"></div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<h1>) এবং একটি বোতাম (<button>) আছে।button এ onclick ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়েছে, যা বোতামটি ক্লিক করলে fetchData() ফাংশন কল করবে।result নামে একটি <div> এলিমেন্ট রয়েছে যেখানে আমরা Ajax থেকে প্রাপ্ত ডেটা ডায়নামিকভাবে দেখাব।app.js ফাইলে রয়েছে, যা HTML এর শেষে যুক্ত করা হয়েছে।function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক)
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স প্রস্তুত হলে কি করবে তা নির্ধারণ করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// JSON ডেটা রিসিভ করা এবং প্রসেস করা
var data = JSON.parse(xhr.responseText);
// HTML ডকুমেন্টে ডেটা আপডেট করা
document.getElementById("result").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else if (xhr.readyState === 4 && xhr.status !== 200) {
// এরর মেসেজ দেখানো যদি রিকোয়েস্ট ব্যর্থ হয়
document.getElementById("result").innerHTML = "Error loading data!";
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
১. XMLHttpRequest অবজেক্ট তৈরি:
fetchData() ফাংশনটি প্রথমে একটি XMLHttpRequest অবজেক্ট তৈরি করে, যা Ajax রিকোয়েস্ট পরিচালনা করার জন্য ব্যবহৃত হয়।২. রিকোয়েস্ট সেটআপ করা:
xhr.open("GET", "URL", true) দিয়ে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে, যা সার্ভারের URL থেকে ডেটা আনবে। "true" মানে রিকোয়েস্টটি অ্যাসিনক্রোনাস হবে।৩. onreadystatechange ইভেন্ট:
xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে আমরা রিকোয়েস্টের অবস্থা চেক করেছি।xhr.readyState === 4 (যখন রিকোয়েস্ট সম্পূর্ণ) এবং xhr.status === 200 (যখন রিকোয়েস্ট সফল), তখন JSON ডেটা প্রসেস করে HTML ডিভে (result) আপডেট করা হয়েছে।xhr.status ২০০ না হয়), তাহলে একটি এরর মেসেজ দেখানো হয়েছে।৪. রিকোয়েস্ট পাঠানো:
xhr.send(); দিয়ে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।এই উদাহরণে আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts/1) ব্যবহার করেছি, যা নিচের মতো JSON ডেটা প্রদান করে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
fetchData() ফাংশন কল হয়।result) এ আপডেট করা হয়, ফলে ইউজার নতুন ডেটা দেখতে পারে পেজ রিলোড না করেই।এই প্রোগ্রামে HTML, JavaScript, এবং Ajax এর মধ্যে সংযোগ দেখানো হয়েছে। XMLHttpRequest অবজেক্টের মাধ্যমে Ajax রিকোয়েস্ট করা হয়েছে, এবং প্রাপ্ত ডেটা HTML ডকুমেন্টে ইনজেক্ট করা হয়েছে। এটি একটি বেসিক কিন্তু গুরুত্বপূর্ণ পদ্ধতি, যা ডায়নামিক ওয়েব অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়।
Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করা হলো ওয়েব ডেভেলপমেন্টের একটি সাধারণ এবং গুরুত্বপূর্ণ প্রক্রিয়া। এই প্রক্রিয়ায় JavaScript ব্যবহার করে, সার্ভারের সাথে যোগাযোগ করা হয় এবং ডেটা রিসিভ করা হয়, যা পেজ রিলোড না করেই HTML ডকুমেন্টে আপডেট করা যায়। নিচে একটি উদাহরণসহ Ajax এর মাধ্যমে ডেটা ফেচ করার ধাপগুলি এবং তা কিভাবে কার্যকর করা যায়, তা ব্যাখ্যা করা হলো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Data Fetch Example</title>
</head>
<body>
<h1>Fetch Data Using Ajax</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container">
<!-- ফেচ করা ডেটা এখানে দেখানো হবে -->
</div>
<script src="app.js"></script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<h1>) এবং একটি বোতাম (<button>) রয়েছে।onclick ইভেন্ট হ্যান্ডলার রয়েছে, যা বোতাম ক্লিক করার সময় fetchData() ফাংশন কল করবে।data-container নামে একটি <div> রয়েছে যেখানে Ajax এর মাধ্যমে ফেচ করা ডেটা ডায়নামিকভাবে দেখানো হবে।function fetchData() {
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক)
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
// রেসপন্স প্রস্তুত হলে কি করবে তা নির্ধারণ করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ
if (xhr.status === 200) { // সফলভাবে ডেটা পাওয়া গেছে
var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
// HTML ডকুমেন্টে ডেটা দেখানো
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
} else {
// যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
document.getElementById("data-container").innerHTML = "Error fetching data!";
}
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
}
বিস্তারিত ব্যাখ্যা:
fetchData() ফাংশনের মধ্যে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করতে ব্যবহৃত হয়।xhr.open("GET", "URL", true) মেথড ব্যবহার করে আমরা একটি GET রিকোয়েস্ট সেটআপ করেছি, যা সার্ভারের URL থেকে ডেটা আনবে। "true" মানে এটি অ্যাসিনক্রোনাস পদ্ধতিতে কাজ করবে।xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্টের অবস্থা চেক করা হয়েছে।xhr.readyState === 4 (রিকোয়েস্ট সম্পূর্ণ) এবং xhr.status === 200 (রিকোয়েস্ট সফল) হয়, তখন JSON ডেটা প্রসেস করে HTML ডকুমেন্টের data-container ডিভে আপডেট করা হয়েছে।xhr.send(); মেথড ব্যবহার করে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।এই উদাহরণে আমরা একটি ডেমো API (https://jsonplaceholder.typicode.com/posts/1) ব্যবহার করেছি, যা নিচের মতো JSON ডেটা রিটার্ন করে:
{
"userId": 1,
"id": 1,
"title": "Sample Title",
"body": "This is a sample body text."
}
fetchData() ফাংশন কল হয়।data-container) এ আপডেট করা হয়, ফলে ইউজার সেই ডেটা দেখতে পারে পেজ রিলোড না করেই।Ajax এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করতে আমরা XMLHttpRequest অবজেক্ট ব্যবহার করি এবং ডেটা পাওয়ার পর JavaScript এর মাধ্যমে HTML আপডেট করি। এটি ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করার একটি বেসিক কিন্তু কার্যকর পদ্ধতি।
Ajax এর জন্য একটি ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করা খুবই সহজ এবং এটি আপনার সিস্টেমে কিছু বেসিক টুলস এবং সেটিংসের মাধ্যমে করা যায়। Ajax প্রোগ্রাম তৈরি করার জন্য একটি ওয়েব সার্ভার, একটি টেক্সট এডিটর, এবং একটি ব্রাউজার প্রয়োজন। নিচে একটি স্টেপ-বাই-স্টেপ গাইড দেওয়া হলো, যা অনুসরণ করে আপনি আপনার Ajax ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করতে পারবেন।
Ajax প্রোগ্রাম লিখতে আপনাকে একটি টেক্সট এডিটর দরকার হবে, যা কোড লিখতে এবং সেভ করতে ব্যবহার করা যায়। জনপ্রিয় কিছু টেক্সট এডিটর হলো:
এডিটরের যেকোনো একটি ডাউনলোড ও ইনস্টল করে নিন।
Ajax প্রোগ্রাম ডেভেলপ ও টেস্ট করার জন্য একটি আধুনিক ওয়েব ব্রাউজার প্রয়োজন। Chrome, Firefox, Safari, বা Edge এর মতো যে কোনো আধুনিক ব্রাউজার ব্যবহার করতে পারেন।
Ajax ডেভেলপমেন্টের জন্য একটি ওয়েব সার্ভার প্রয়োজন, কারণ Ajax রিকোয়েস্ট সিকিউরিটি রুলের কারণে লোকাল ফাইল সিস্টেম থেকে কাজ করে না। ওয়েব সার্ভার সেটআপ করার কয়েকটি সহজ পদ্ধতি নিচে দেওয়া হলো:
Live Server নামের একটি এক্সটেনশন ইনস্টল করতে পারেন।http://localhost:5500 (বা অন্য যে কোনো লোকাল URL) এ অ্যাক্সেস করতে পারবেন।npm install -g http-serverhttp-serverhttp://localhost:8080 এ চালু করবে, যেখানে আপনি আপনার Ajax প্রোগ্রাম টেস্ট করতে পারবেন।আপনার প্রোজেক্ট ডিরেক্টরিতে একটি ফোল্ডার তৈরি করুন, যেমন ajax-project। এরপর সেখানে নিচের ফাইলগুলো তৈরি করুন:
index.html ফাইলটি নিচের মতো হতে পারে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Development Setup</title>
</head>
<body>
<h1>Ajax Development Environment</h1>
<button onclick="fetchData()">Fetch Data</button>
<div id="data-container"></div>
<!-- JavaScript ফাইল যুক্ত করা -->
<script src="app.js"></script>
</body>
</html>
app.js ফাইলে একটি বেসিক Ajax ফাংশন লিখুন:
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById("data-container").innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
}
};
xhr.send();
}
http-server বা VS Code এর Live Server থেকে)।http://localhost:8080 (অথবা আপনার সার্ভারের লোকাল URL) খুলুন।Ajax এর জন্য ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করতে টেক্সট এডিটর, একটি ওয়েব ব্রাউজার, এবং একটি লোকাল ওয়েব সার্ভার প্রয়োজন। এই টুলগুলোর মাধ্যমে আপনি সহজেই Ajax প্রোগ্রাম তৈরি, ডিবাগ, এবং টেস্ট করতে পারবেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
